<template>
  <div class="box-content">
    <div class="box-content-header">
      <p>安全评估</p>
      <span style="color:#fff;">
        <p>今日产生隐患{{troubleCount}}个</p>
      </span>
    </div>
    <div class="box-content-body">
      <div class="l">
        <div class="w1 h1"
          ref="fengxiandengji"></div>
      </div>
      <div class="r">
        <div class="w1 h1">
          <div class="w1 h1">
            <div class="chart-top">
              <div class="w1 h1"
                ref="jinriyinhuan"></div>
            </div>
            <!-- <div class="chart-bottom">
              <div class="line-progress">
                <div class="one">
                  <div v-if="untreated>0"
                    :style="{'width':untreated/troubleCount*100+'%'}">已发送未解决</div>
                  <div v-if="unsettled>0"
                    :style="{'width':unsettled/troubleCount*100+'%'}">未处理</div>
                  <div v-if="settled>0"
                    :style="{'width':settled/troubleCount*100+'%'}">已解决</div>
                </div>
                <div class="two">
                  <div :style="{'width':untreated/troubleCount*100+'%'}"></div>
                  <div :style="{'width':unsettled/troubleCount*100+'%'}"></div>
                  <div :style="{'width':settled/troubleCount*100+'%'}"></div>
                </div>
                <div class="one">
                  <div v-if="untreated>0"
                    :style="{'width':untreated/troubleCount*100+'%'}">{{untreated}}个</div>
                  <div v-if="unsettled>0"
                    :style="{'width':unsettled/troubleCount*100+'%'}">{{unsettled}}个</div>
                  <div v-if="settled>0"
                    :style="{'width':settled/troubleCount*100+'%'}">{{settled}}个</div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSafeEvaluation } from '@/api'
let resize1 = null,
  resize2 = null
export default {
  props: {
    companyId: {
      type: String,
      default: ''
    }
  },

  computed: {
    windowWidth: () => {
      return document.body.clientWidth
    }
  },

  watch: {
    companyId() {
      this.init()
    }
  },

  data: () => ({
    // 已解决的占百分比
    settled: 0,
    // 解决中
    unsettled: 0,
    // 未解决
    untreated: 0,
    troubleCount: 0
  }),

  mounted() {
    this.init()
  },

  methods: {
    async init() {
      const vm = this
      const companyId = vm.companyId
      if (!companyId) return
      const params = { companyId }
      const { code, data } = await getSafeEvaluation(params)
      if (code !== 200) {
        return
      }
      const { safeLevel, hiddenTrouble } = data
      const { settled, unsettled, untreated, troubleCount } = hiddenTrouble
      vm.troubleCount = troubleCount
      vm.settled = settled
      vm.unsettled = unsettled
      vm.untreated = untreated
      vm.initFengXianDengJi(safeLevel)
      vm.initRightChart(hiddenTrouble)
    },

    initFengXianDengJi(safeLevel) {
      const vm = this
      const infoArray = [
        { name: '安全', itemStyle: { color: '#43F008' }, index: 0 },
        { name: '低', itemStyle: { color: '#3E8DF9' }, index: 1 },
        { name: '中', itemStyle: { color: '#FBC200' }, index: 2 },
        { name: '高', itemStyle: { color: '#FE0100' }, index: 3 }
      ]
      const series = index => {
        return infoArray.map(t => {
          if (t.index === index) {
            t['value'] = 10
          } else {
            t['value'] = 0
          }
          return t
        })
      }
      // 等级 0：安全，1：低，2：中，3：高
      const { name, level } = safeLevel
      vm.$nextTick(() => {
        const dom = this.$refs.fengxiandengji
        const chart = this.echarts.init(dom)
        const option = {
          legend: {
            x: 'center',
            y: '72%',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '风险等级',
              type: 'pie',
              center: ['50%', '38%'],
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter: '风险等级',
                  fontSize: '80%',
                  color: '#fff'
                },
                emphasis: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: series(level)
            }
          ]
        }
        chart.setOption(option)
        // if (this.windowWidth <= 1400) {
        //   alert(1)
        //   option.legend.y = '72%'
        //   chart.setOption(option)
        // } else {
        //   option.legend.y = '80%'
        //   chart.setOption(option)
        // }
        // alert(this.windowWidth)
        resize1 = () => chart.resize()
        window.addEventListener('resize', resize1)
      })
    },

    initRightChart(hiddenTrouble) {
      const vm = this
      const { troubleTypeList, troubleTypeCountList } = hiddenTrouble
      const troubleList = []
      const troubleType = []
      const flag = troubleTypeCountList.reduce(
        (accumulator, currentValue) =>
          Number(accumulator) + Number(currentValue)
      )
      if (!flag) {
        let option = {
          title: {
            text: '今日未发现隐患',
            left: 'center',
            top: 'center',
            textStyle: {
              color: '#fff',
              fontSize:"90%"
            }
          }
        }
        vm.$nextTick(() => {
          const dom = vm.$refs.jinriyinhuan
          const chart = vm.echarts.init(dom)
          chart.setOption(option)
          resize2 = () => chart.resize()
          window.addEventListener('resize', resize2)
        })
        return false
      }
      troubleTypeCountList.forEach((t, i) => {
        if (t) {
          troubleList.push(t)
          troubleType.push(troubleTypeList[i])
        }
      })
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: '3%',
          left: '0%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [...troubleType],
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            name: '隐患数量',
            type: 'bar',
            barWidth: '10%',
            barMaxWidth: '10',
            data: [...troubleList]
          }
        ]
      }

      vm.$nextTick(() => {
        const dom = vm.$refs.jinriyinhuan
        const chart = vm.echarts.init(dom)
        chart.setOption(option)
        resize2 = () => chart.resize()
        window.addEventListener('resize', resize2)
      })
    }
  }
}
</script>